<template>
	<view class="change-password">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="设置密码" :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='设置密码' :showButtonMore="false"></headBarAPP>
		<!-- #endif -->

		<view class="container">
			<view class="button" :class="{'active':active_submit}" @tap="Submit()">保存</view>
			<view class="info-text">请设置登录密码，忘记密码请联系客服</view>
			<view class="account-text">账号： {{userInfo.account}}</view>
			<view class="item">
				<view class="text">原密码：</view>
				<input placeholder="请输入原密码" v-model="oldPassword_input" @blur="InputOldPassword()" />
			</view>
			<view class="item">
				<view class="text">新密码：</view>
				<input placeholder="请输入新密码" v-model="newPassword_input" @blur="InputNewPassword()" />
			</view>
			<view class="item">
				<view class="text">确认密码：</view>
				<input placeholder="确认新密码" v-model="newPassword_input_sure" @blur="SureNewPassword()" />
			</view>
			<view class="info-text">
				密码必须是8-16位的英文字母、数字、字符组合（不能是纯数字)
			</view>
		</view>
	</view>
</template>

<script>
	// 导入云对象
	const userInfo = uniCloud.importObject('userInfo', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				// 信息
				userInfo: {},
				oldPassword_input: "",
				newPassword_input: "",
				newPassword_input_sure: "",

				// 标识变量
				active_submit: false,
			}
		},
		onLoad() {
			const app = getApp();
			this.userInfo = app.userInfo;
		},
		methods: {
			InputOldPassword() {
				console.log("输入旧密码");
				if (this.oldPassword_input == this.userInfo.password) {
					console.log("输入旧密码成功");
				} else {
					console.log("输入旧密码失败");
					uni.showToast({
						title: '原密码错误',
						icon: "none",
					});
				}
			},
			InputNewPassword() {
				// 判断是否输入原密码
				if (!this.oldPassword_input) {
					console.log("未输入原密码");
					uni.showToast({
						title: '未输入原密码',
						icon: "none",
					});
				}
				console.log("输入新密码：" + this.newPassword_input);

			},
			SureNewPassword() {
				// 判断是否输入新密码
				if (!this.newPassword_input) {
					console.log("未输入新密码");
					uni.showToast({
						title: '未输入新密码',
						icon: "none",
					});
				}
				console.log("确认新密码：" + this.newPassword_input_sure);
				if (this.newPassword_input == this.newPassword_input_sure) {
					console.log("两次密码输入正确");
					this.active_submit = true;
				} else {
					console.log("两次密码输入不同");
					uni.showToast({
						title: '两次密码输入不同',
						icon: "none",
					});
					this.active_submit = false;
				}
			},
			Submit() {
				console.log('提交保存');
				this.userInfo.password = this.newPassword_input_sure;
				userInfo.ModifyPassword(this.userInfo).then(res => {
					console.log(res);
					uni.navigateBack();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-text {
		margin-top: 20rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		color: rgba(0, 0, 0, 0.7);
	}

	.account-text {
		margin-top: 20rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		font-size: $font-size-l-s;
		color: rgba(0, 0, 0, 0.7);
	}

	.item {
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		margin-right: 40rpx;
		border-bottom: 3rpx solid rgba(0, 0, 0, 0.05);

		.text {
			width: 190rpx;
			font-size: $font-size-m-l;
		}

		input {
			flex: 1;
			font-size: $font-size-m-m;
			color: rgba(0, 0, 0, 0.7);
		}
	}

	.button {
		position: fixed;
		top: 10rpx;
		right: 30rpx;
		width: 100rpx;
		height: 70rpx;
		display: flex;
		background-color: rgba(0, 0, 0, 0.4);
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		color: white;
		font-size: $font-size-m-m;
	}

	.button.active {
		background-color: rgba(88, 190, 106, 1);
	}
</style>